<template>
	<view class="pageView ">
		<view class="content p-top20">
			<view class="row j-se a-center white">
				<block v-for="(item,index) in nav" :key="index">
					<text :class="current == index?'white size42':'color_aa size36'" @click="current = index">{{item}}</text>
				</block>
			</view>
			<view class="formBox">
				<view class="iptItem">
					<view class="iptBox flexBox">
						<text class="left">+86</text>
						<input v-model="mobile1" maxlength="11" type="number" adjust-position placeholder="请输入手机号" class="ipt" placeholder-class="iptP" />
					</view>
				</view>

				<view class="iptItem iptItem1" v-if="current == 0">
					<view class="iptBox flexBox">
						<text class=""></text>
						<input v-model='password' type="text" :password="ispassword" placeholder="请输入登录密码" adjust-position class="ipt"
							placeholder-class="iptP" />
						<view class="iconfont  white  p-right24" :class="ispassword?'icon-yincangmima size36':'icon-chakanmima size28'"
							@click="ispassword = !ispassword"></view>
						<view class="color_23 bold size32"  @click="toUrl('findPsd')">忘记密码</view>
					</view>
				</view>

				<view class="rows" v-else>
					<view class="iptItem iptItem1" >
						<view class="iptBox flexBox">
							<text class=""></text>
							<input v-model='code' type="number" placeholder="请输入验证码" adjust-position class="ipt" placeholder-class="iptP" />
							<view class="codeBtn color_23 bold size32" @click="getCode">{{downState?tim+'S':'获取验证码'}}</view>
						</view>
					</view>
					
					<view class="rows m-top30">
					    <liu-slider-verify :Offset='3' @result='status'></liu-slider-verify>
					</view>
				
				</view>

				


				<view class="row  j-centert  f-nowrap  m-top50 " @click="isagree = !isagree">
					<view class="sel flexac m-top6" :class="isagree?'bg36':'bgwhite'">
						<view class="iconfont icon-xuanzhong white h6"></view>
					</view>
					<view class="flex-1 d-flex f-wrap size26 m-left20">
						<text class="color_CB ">我已阅读并同意</text>
						<text class="color_36" @tap="go('../login/privacyPolicy?type=1')">《用户协议》</text>
						<text class="color_CB">与</text>
						<text class="color_36" @tap="go('../login/privacyPolicy?type=2')">《隐私政策》</text>
					</view>
				</view>

				<view class="findpsd flex"> </view>
				<view @click="Passwordlogin" class="subBtn bg51 color_23 size36 bold t-letter4" v-if="current == 0">立即登录</view>
				<view @click="Codelogin" class="subBtn bg51 color_23 size36 bold t-letter4" v-if="current == 1">立即登录</view>
				<view class="row j-centert black size30 m-top30" v-if="current == 0">未注册的手机号验证后可自动登录</view>
				<view class="row j-centert color_aa size30 m-top30" v-if="current == 1">未注册的手机号验证后可自动登录</view>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<view class="botFied ">
			<view class="row j-centert">
				<view class="d-flex a-center">
					<image src="../../static/imgs/bsn.png" class="Bsn m-right30"></image>
					<text class="color_aa size28">提供技术支持</text>
				</view>
			</view>
			<div class="row j-centert ">
				<div style="padding:20px 0; ">
					<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50011902000413" style="text-decoration: none;"
						class="d-block d-flex f-column a-center">
						<div class="d-flex a-center">
							<img src="https://www.etometa.com/ganwbei.png" />
							<p style="height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">渝公网安备50011902000413号</p>
						</div>
						<p style="height:20px;line-height:20px;margin: 10px 0px 0px 5px; color:#939393;">渝ICP备18002808号</p>
					</a>
				</div>
			</div>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	
	import reg from '@/common/reg.js';
	import {
		mapMutations
	} from 'vuex';
	export default {
		
		data() {
			return {
				btnMsg: '获取验证码',
				nav: ['密码登录', '验证码登录'],
				mobile1: '',
				code: '',
				count: null,
				tim: 60,
				downState: false, // 开关
				isagree: false,
				invite: '',
				current: 0, // 0 密码登录 1验证码登录
				password: '',
				ispassword: true,
				flag:false,  
			}
		},
		onLoad(option) {
			if (option.invite) this.invite = option.invite;
		},
		methods: {
			...mapMutations(['getInfo']),
			status(e){
				this.flag = e.flag;
			},
			getCode() {
				if (this.downState) return;
				if (!this.mobile1) return this.$showToastTxt('请输入手机号码！')
				if (!this.mobile1.match(reg.phone)) return this.$showToastTxt('手机号码输入有误！')
				if(!this.flag) return this.$Toast('请拖动滑动验证！');
				this.$https.post({
					url: '/login/sendCode',
					data: {
						phone: this.mobile1,
						type: '3'
					}
				}).then(res => {
					if (res.code != 1) return this.$showToastTxt(res.msg);
					this.downState = true;
					this.count = setInterval(() => {
						if (this.tim > 0) {
							this.tim--;
						} else {
							clearInterval(this.count);
							this.downState = false;
						}
					}, 1000)
				})


			},

			Codelogin() {
				if (!this.mobile1) return this.$showToastTxt('请输入手机号码！')
				if (!this.mobile1.match(reg.phone)) return this.$showToastTxt('手机号码输入有误！');
				if (!this.code) return this.$showToastTxt('请输入验证码！')
				if (!this.isagree) return this.$showToastTxt('未阅读并同意协议！')
				this.$http.post('login/codeLogin', {
					phone: this.mobile1,
					code: this.code,
					invite: this.invite
				}).then(res => {
					if (res.code != 1) return this.$showToastTxt(res.msg);
					this.$showToastTxt(res.msg);
					if (res.data.app_token) this.getInfo({
						app_token: res.data.app_token
					})
					uni.setStorageSync('app_token', res.data.app_token);
					this.getMemInfo();
					setTimeout(() => {
						uni.reLaunch({
							url: '../index/index'
						});
					}, 1000);

				})
			},


			Passwordlogin() { //密码登录
				if (!this.mobile1) return this.$Toast('请输入手机号码');
				if (!this.mobile1.match(reg.phone)) return this.$showToastTxt('手机号码输入有误！');
				if (!this.password) return this.$Toast('请输入登录密码');
				if (!this.isagree) return this.$showToastTxt('未阅读并同意协议！')
				this.$http.post('login/login/', {
					phone: this.mobile1,
					password: this.password
				}).then(res => {
					if(res.code != 1) return this.$Toast(res.msg);
					this.$Toast(res.msg);
					if (res.data.app_token) this.getInfo({
						app_token: res.data.app_token
					})
					uni.setStorageSync('app_token', res.data.app_token);
					this.getMemInfo();
					setTimeout(() => {
						uni.reLaunch({
							url: '../index/index'
						});
					}, 1000);
				})
			},

			getMemInfo() {
				this.$http.get('user/userInfo').then(res => {
					if (res.code != 1) return;
					if (res.data.phone) this.getInfo({
						phone: res.data.phone
					});
					if (res.data.wx_auth) this.getInfo({
						wx_auth: res.data.wx_auth
					});
					uni.setStorageSync('phone', res.data.phone);
					uni.setStorageSync('wx_auth', res.data.wx_small_auth);
				})
			},


		}
	}
</script>
<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss" scoped>
	.seeImg {
		width: 40rpx;
		height: 40rpx;
	}

	.read {
		width: 100vw;

	}

	.pageView {
		width: 100%;
		// min-height: 100vh;
		background-image: url(@/static/imgs/bg.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.Bsn {
		width: 250rpx;
		height: 41rpx;
	}

	.sel {
		width: 30rpx;
		height: 30rpx;
		border-radius: 6rpx;
	}

	.move-ver {
		margin-top: 30rpx;
	}

	// .botFied{
	// 	width:100%;
	// 	position: absolute;
	// 	bottom: 20rpx;
	// 	left:50%;
	// 	z-index:888;
	// 	transform: translate(-50%,0);
	// }

	.content {
		padding-top: 100rpx;
		padding-bottom: 100rpx;

		.bjImg {
			width: 100%;
			height: 520rpx;

		}


		.formBox {
			width: 690rpx;
			margin: 0 auto;
			// background-color: #23272C;
			padding: 40rpx;
			border-radius: 60rpx 60rpx 0 0;

			.tabBox {
				height: 100rpx;
				line-height: 100rpx;
				margin-bottom: 50rpx;
				background-color: #23272C;

				.tab {
					text-align: center;
					font-size: 30rpx;
					color: #AAAAAA;
				}

				.line {
					width: 2rpx;
					height: 36rpx;
					margin: 0 30rpx;
					background-color: #EEEEEE;
				}

				.act {
					color: #00D18B;
					font-weight: 500;
				}
			}

			.iptItem {
				margin-bottom: 40rpx;

				.label {
					color: #FFFFFF;
					font-size: 26rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.iptBox {
					padding: 0 30rpx;
					background: #383B3F;
					height: 112rpx;
					border-radius: 56rpx;
					font-size: 32rpx;

					.left {
						color: #aaaaaa;
						margin-right: 40rpx;
					}

					.ipt {
						flex: 1;
						height: 100%;
						font-size: 32rpx;
						font-weight: 500;
						background: none;
						border: none;
						color: #AAAAAA;
						outline: none;
					}

					.ipt::after {
						border: none;
					}

					.codeBtn {
						width: 220rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						border-radius: 34rpx;

						font-weight: 500;

					}

					.rightIcon {
						width: 48rpx;
						height: 48rpx;
						padding: 10rpx;
					}
				}
			}

			.iptItem1 {
				margin-bottom: 0rpx;
			}

			.findpsd {
				height: 60rpx;
				line-height: 60rpx;
				justify-content: flex-end;
				color: #777777;
				font-size: 28rpx;
			}
		}

		.psdBox {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 550rpx;

			.rememberIcon {
				width: 44rpx;
				height: 44rpx;
				padding: 20rpx;
			}

			.remeberBox {
				color: #777777;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.subBtn {
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;


			margin: 10rpx auto 0;

			// background: linear-gradient(90deg, #00D18B 0%, #00D18B 100%);
			// box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(159, 255, 109, 0.4);
		}

		.subBtn1 {
			width: 600rpx;
			text-align: center;
			color: #777777;
			font-size: 32rpx;
			font-weight: 500;
			margin: 40rpx auto 0;
		}

		.loginBox {
			position: absolute;
			left: 0;
			bottom: 50rpx;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #aaaaaa;

			text {
				color: #AE3523;
			}
		}

	}
</style>
